<template>
  <div class="background-wrapper">
    <div class="container">
      <div class="form-container">
        <transition name="slide">
          <div v-if="isLoginMode" key="login-form" class="left-panel">
            <div class="left-content">
              <h2 class="welcome-title">账号登录</h2>
              <form class="login-form" @submit.prevent="handleLogin">
                <input type="text" v-model="loginForm.username" placeholder="用户名" class="form-input" />
                <input type="password" v-model="loginForm.password" placeholder="密码" class="form-input" />
                <div class="forgot-password">
                  <a href="#" class="forgot-link">忘记密码？</a>
                </div>
                <button class="btn sign-in-btn" :disabled="loading">
                  {{ loading ? '登录中...' : '登 录' }}
                </button>
              </form>
            </div>
          </div>
          <div v-else key="register-prompt" class="left-panel">
            <div class="left-content">
              <h2 class="welcome-title">欢迎回来！</h2>
              <p class="welcome-text">
                请使用您的个人信息登录以保持与我们的联系。
              </p>
              <button @click="toggleMode" class="btn sign-in-btn">登 录</button>
            </div>
          </div>
        </transition>

        <transition name="slide">
          <div v-if="isLoginMode" key="login-prompt" class="right-panel">
            <div class="right-content">
              <h2 class="create-title">没有账号？</h2>
              <p class="welcome-text">
                立即注册账号，开始您的全新体验！
              </p>
              <button @click="toggleMode" class="btn sign-up-btn outline">注 册</button>
            </div>
          </div>
          <div v-else key="register-form" class="right-panel">
            <div class="right-content">
              <h2 class="create-title">创建账户</h2>
              <div class="social-icons">
                <div class="social-icon">
                  <i class="fab fa-facebook-f"></i>
                </div>
                <div class="social-icon">
                  <i class="fab fa-linkedin-in"></i>
                </div>
                <div class="social-icon">
                  <i class="fab fa-twitter"></i>
                </div>
              </div>
              <p class="or-text">或使用邮箱注册</p>
              <form class="signup-form" @submit.prevent="handleRegister">
                <input type="text" v-model="registerForm.username" placeholder="用户名" class="form-input" />
                <input type="email" v-model="registerForm.email" placeholder="邮箱" class="form-input" />
                <input type="password" v-model="registerForm.password" placeholder="密码" class="form-input" />
                <button class="btn sign-up-btn" :disabled="loading">
                  {{ loading ? '注册中...' : '注 册' }}
                </button>
              </form>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import UserUtil from '@/utils/User/User.js'
import { useRouter } from 'vue-router';
import { UserProfileApi } from "@/api/new/userProfleApi.js";
import { ElMessage } from 'element-plus'

const router = useRouter();
const isLoginMode = ref(true);
const loading = ref(false);
const errorMessage = ref('');

// 表单数据
const loginForm = ref({ username: '', password: '' });
const registerForm = ref({ username: '', password: '', email: '', headshot: '' });

// 切换登录/注册模式
const toggleMode = () => {
  errorMessage.value = '';
  isLoginMode.value = !isLoginMode.value;
};

// 处理登录提交
const handleLogin = async (e) => {
  e.preventDefault();
  if (!loginForm.value.username || !loginForm.value.password) {
    errorMessage.value = '请输入用户名和密码';
    return;
  }

  try {
    loading.value = true;
    const res = await UserUtil.login(
        loginForm.value.username,
        loginForm.value.password
    );
    ElMessage.success('登录成功');
    setTimeout(() => {
      // 跳转到首页
      router.push('/dashboard');
    },1000);
  } catch (error) {
    ElMessage.error(error.message || '登录失败，请检查用户名和密码');
    errorMessage.value = error.message || '登录失败，请检查用户名和密码';
  } finally {
    loading.value = false;
  }
};

// 处理注册提交
const handleRegister = async (e) => {
  e.preventDefault();
  if (!registerForm.value.username || !registerForm.value.password || !registerForm.value.email) {
    errorMessage.value = '请填写所有必填字段';
    return;
  }

  try {
    loading.value = true;
    await UserProfileApi.register(
        registerForm.value.username,
        registerForm.value.password,
        registerForm.value.email,
        registerForm.value.headshot || '' // 处理可选的头像字段
    );

    // 注册成功后自动切换到登录界面
    toggleMode();
    errorMessage.value = '注册成功，请登录！';
  } catch (error) {
    errorMessage.value = error.message || '注册失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* 新增背景包裹层 */
.background-wrapper {
  position: relative;
  min-height: 100vh;
}
/* 通过伪元素实现背景模糊层 */
.background-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/7529759a6f08c2a9f92ca58a4dbba2d6.jpg?ver=1');
  background-size: cover;
  background-position: center;
  filter: blur(4px); /* 关键模糊属性 */
  z-index: 0;
}
.container {
  position: relative; /* 确保内容在模糊层之上 */
  z-index: 1; /* 层级高于背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form-container {
  display: flex;
  width: 800px;
  height: 500px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.left-panel, .right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  transition: all 0.6s ease-in-out;
}

.left-panel {
  left: 0;
  background-color: white;
  background-image:
      radial-gradient(circle at 10% 10%, rgba(230, 230, 230, 0.3) 10%, transparent 20%),
      radial-gradient(circle at 90% 90%, rgba(230, 230, 230, 0.3) 10%, transparent 20%);
}

.right-panel {
  right: 0;
}

.left-content, .right-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.welcome-title, .create-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.welcome-text, .or-text {
  text-align: center;
  color: #777;
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.5;
}

.btn {
  padding: 12px 40px;
  border-radius: 50px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.sign-in-btn, .sign-up-btn {
  background-color: #ff2442;
  color: white;
}

.sign-in-btn:hover, .sign-up-btn:hover {
  background-color: #ff2442;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.outline {
  background-color: transparent;
  border: 2px solid #ff2442;
  color: #ff2442;
}

.outline:hover {
  background-color: #ff2442;
  color: white;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #f5f5f5;
}

.social-icon i {
  color: #666;
  font-size: 16px;
}

.signup-form, .login-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 15px;
}

.form-input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #ff2442;
}

.sign-up-btn, .sign-in-btn {
  margin-top: 15px;
}

.forgot-password {
  text-align: right;
  width: 100%;
}

.forgot-link {
  color: #777;
  font-size: 12px;
  text-decoration: none;
}

.forgot-link:hover {
  color: #ff2442;
  text-decoration: underline;
}

/* 动画效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease-out;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

@media (max-width: 768px) {
  .form-container {
    flex-direction: column;
    height: auto;
    width: 90%;
  }

  .left-panel, .right-panel {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30px 20px;
  }
}
</style>
